<template>
	<view>
		<movieItem v-for="movie in movies" :key="movie.id" :movie="movie"/>
		<view v-if="isFinsh">-------------已经到底部------------</view>
	</view>
</template>

<script>
	// 导入组件
	import movieItem from "./movieItem.vue"
	// 导入数据
	import data from "../../data/movie.json"
	// 导入promise
	import {delay}  from "../../utils/tools.js"
	
	export default {
		data() {
			return {
				pageNo:1,
				pageSize:10,
				totalSize:0,
				totalPage:0,
				list:[], // 所有电影数据
				movies:[], // 当前页码的数据

			}
		},
		computed:{
			isFinsh() {
				return this.pageNo >= this.totalPage;
			}
 		},
		onReady() {
			// console.log('xxxxx')
			this.initData();
			this.loadData()
		},
		// 下拉刷新
		onPullDownRefresh() {
			/// console.log("下拉刷新.....")
			this.setInit();
			this.initData();
			this.loadData();
			
			
		},
		// 上拉加载
		onReachBottom() {
			if(this.isFinsh) {
				uni.showToast({
					title: '已经加载到最后一页了..',
					duration: 1000
				});
				return;
			}
			// console.log("我被触发了.....")
			this.pageNo++;
			this.loadData();
		},
		components: {
			movieItem
		},
		methods: {
			setInit() {
				this.pageNo=1;
				this.pageSize=10;
				this.totalSize=0;
				this.totalPage=0;
				this.list=[]; // 所有电影数据
				this.movies=[]; // 当前页码的数据
			},
			// 初始化电影数据
			initData() {
				// 10   21
				this.list = data.movie.subjects;
				this.totalSize = this.list.length;
				this.totalPage = Math.ceil(this.totalSize/this.pageSize);
			},
			// 加载当前页的电影数据
			async loadData() {
				
				uni.showLoading({
					title:`正在加载第${this.pageNo}页数据！`,
					mask:true
					
				})
				
				
				await delay()
				// pageNo  pageSize
				const startNo = (this.pageNo -1)* this.pageSize;
				const endNo = this.pageNo * this.pageSize
				
				const curData = this.list.slice(startNo,endNo)
				this.movies = [...this.movies,...curData]
				uni.hideLoading();
				uni.stopPullDownRefresh();
				
			}

		}
	}
</script>

<style>

</style>